<template>
<div class='main-container'>
  <div class="description">
    {{$t('home.description')}}
  </div>
  <el-carousel height="600px">
    <el-carousel-item v-for="(image, index) in imageList" :key="index">
      <img class="preview-image" :src="image" alt="">
    </el-carousel-item>
  </el-carousel>
</div>
</template>

<script>

export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      imageList: [
        require('@/assets/images/preview_light.png'),
        require('@/assets/images/preview_dark.png'),
        require('@/assets/images/tools_light.png'),
        require('@/assets/images/tools_dark.png')
      ]
    }
  },
  computed: {},
  watch: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>
<style lang="less" scoped>
.main-container {
  background-color: #f5f5f5;
  padding-bottom: 20px;
  .description {
    padding-top: 30px;
    margin-bottom: 30px;
    font-size: 30px;
    text-align: center;
  }
  .el-carousel {
    margin: 0 auto;
    width: 960px;
    border-radius: 30px;
  }
  .preview-image {
    width: 100%;
    height: 100%;
  }
}
</style>>
